<template>
  <div>
    <Pannel
      v-for="item in list"
      :key="item.id"
      :src="item.src"
      :title="item.title"
      @harry="harr"
    />
    <div>
      <span>你喜欢的狗如下：</span>
      <div>
        <p v-for="(item, index) in arr" :key="index">
          {{ item }}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import Pannel from "./components/Dog.vue";
export default {
  components: {
    Pannel,
  },
  data() {
    return {
      list: [
        {
          id: 1,
          title: "柯基",
          src: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg95.699pic.com%2Fxsj%2F05%2F47%2Fmk.jpg%21%2Ffw%2F700%2Fwatermark%2Furl%2FL3hzai93YXRlcl9kZXRhaWwyLnBuZw%2Falign%2Fsoutheast&refer=http%3A%2F%2Fimg95.699pic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666439734&t=6f17831b1969f37c4709dd8073e05d58",
        },
        {
          id: 2,
          title: "阿拉斯加",
          src: "https://img1.baidu.com/it/u=1690337816,4247323366&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=701",
        },
        {
          id: 3,
          title: "卡南犬",
          src: "https://img0.baidu.com/it/u=3378003768,251549097&fm=253&fmt=auto&app=120&f=JPEG?w=664&h=514",
        },
        {
          id: 4,
          title: "哈士奇",
          src: "https://img1.baidu.com/it/u=3294583970,321642350&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=416",
        },
        {
          id: 5,
          title: "哈巴狗",
          src: "https://img1.baidu.com/it/u=2793214251,1108608171&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=497",
        },
        {
          id: 6,
          title: "博美",
          src: "https://img2.baidu.com/it/u=2901211066,3809515600&fm=253&fmt=auto&app=138&f=PNG?w=419&h=523",
        },
        {
          id: 7,
          title: "斑点狗",
          src: "https://img2.baidu.com/it/u=278931523,2055520161&fm=253&fmt=auto&app=138&f=JPEG?w=755&h=500",
        },
        {
          id: 8,
          title: "玩具贵宾犬",
          src: "https://img0.baidu.com/it/u=19412729,3047138310&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=319",
        },
      ],
      arr: [],
    };
  },
  methods: {
    harr(str) {
      // console.log(str);
      this.arr.push(str);
    },
  },
};
</script>

<style>
</style>